<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8" />
  <title>Document</title>
  <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
  <style>
    .fade-slide-enter-active,
    .fade-slide-leave-active {
      transition: all 1s;
    }

    .fade-slide-enter,
    .fade-slide-leave-to {
      /* transform:translateX(10px);
  opacity:0 */
    }

    .toggle {
      position: absolute;
      left: 0;
      top: 0;
      border-radius: 50%;
      box-sizing: border-box;
      width: 50px;
      height: 50px;
      border: none;
      outline: none;
      left: 200px;
      top: 100px;
      z-index: 1000;
      background: yellowgreen;
      color: #fff;
    }

    .menu {
      width: 50px;
      height: 50px;
      position: absolute;
      left: 200px;
      top: 100px;
    }

    .menu .circle {
      position: absolute;
      width: 100%;
      height: 100%;
      display: flex;
      justify-content: center;
      align-items: center;
      color: #fff;
      border-radius: 50%;
      left: 0;
      top: 0;
      z-index: 10;
      /* transition:all 1s; */
    }

    .menu .circle.circle1 {
      background: green;
      transform: translate3d(30px, -60px, 0);
    }

    .menu .circle.circle2 {
      background: yellow;
      transform: translate3d(60px, 0px, 0);
    }

    .menu .circle.circle3 {
      background: blue;
      transform: translate3d(30px, 60px, 0);
    }

    .menu.fade-slide-enter-active .circle1 {
      animation: circle1-enter 1s forwards;
    }

    .menu.fade-slide-enter-active .circle2 {
      animation: circle2-enter 1s forwards;
    }

    .menu.fade-slide-enter-active .circle3 {
      animation: circle3-enter 1s forwards;
    }

    .menu.fade-slide-leave-to .circle {
      animation: circle-leave 1s;
    }

    @keyframes circle1-enter {
      from {
        transform: translate3d(0, 0, 0);
      }

      to {
        transform: translate3d(30px, -60px, 0);
      }
    }

    @keyframes circle-leave {
      to {
        transform: translate3d(0, 0, 0);
      }
    }

    @keyframes circle2-enter {
      from {
        transform: translate3d(0, 0, 0);
      }

      to {
        transform: translate3d(60px, 0px, 0);
      }
    }

    @keyframes circle3-enter {
      from {
        transform: translate3d(0, 0, 0);
      }

      to {
        transform: translate3d(30px, 60px, 0);
      }
    }
  </style>
</head>

<body>
  <div id="app">
    <transition name="fade-slide">
      <div class="menu" v-if="show">
        <span class="circle circle1">1</span>
        <span class="circle circle2">2</span>
        <span class="circle circle3">3</span>
      </div>
    </transition>
    <br />
    <button class="toggle" @click="show = !show">{{show?'关':'开'}}</button>
  </div>
</body>
<script>
  var vm = new Vue({
    el: '#app',
    data: {
      show: false
    }
  })
</script>

</html>